<template>
  <div ref="home" class="articleList" @scroll="scollTop">
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 每一篇文章 -->
        <van-cell v-for="val in articleList" :key="val.art_id" :title=" val.title " @click="$router.push(`/articleDetail/${val.art_id}`)">
          <template #label>
            <van-grid v-if="val.cover.images" :column-num="val.cover.images.length">
              <van-grid-item v-for=" (img,index) in val.cover.images" :key="index">
                <van-image :src="img" lazy-load />
              </van-grid-item>
            </van-grid>
            <!-- 文字说明 -->
            <div class="meta">
              <span>{{ val.aut_name }}</span>
              <span>{{ val.comm_count }}评论</span>
              <span>{{ val.pubdate|fromNow }}</span>
              <!-- 只有登录的用户, 才能看见这个 x 按钮 -->
              <span v-if="$store.state.user.tokenInfo.token" class="close" @click="close(val.art_id)">
                <van-icon name="cross" />
              </span>
            </div>
          </template>
        </van-cell>
      </van-list>
      <template #pulling="props">
        <img
          class="doge"
          src="https://img01.yzcdn.cn/vant/doge.png"
          :style="{ transform: `scale(${props.distance / 80})` }"
        >
      </template>

      <!-- 释放提示 -->
      <template #loosing>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge.png">
      </template>

      <!-- 加载提示 -->
      <template #loading>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge-fire.jpg">
      </template>
    </van-pull-refresh>
  </div>
</template>

<script>
import { reqGetAriticles } from '@/api/articles'
import eventBus from '@/utils/event-bus'

export default {

  name: 'AritlceList',
  props: {
    item: {
      type: Object,
      required: true

    }
  },
  data() {
    return {
      articleList: [],
      loading: false,
      finished: false,
      timestamp: null,
      isRefresh: false,
      scrollTop: ''
    }
  },
  activated() {
    this.$refs.home.scrollTop = this.scrollTop
  },

  methods: {
    async onLoad() {
      if (!this.timestamp) {
        this.timestamp = +new Date()
      }
      const res = await reqGetAriticles(this.item.id, this.timestamp)
      this.timestamp = res.data.pre_timestamp
      this.articleList = [...this.articleList, ...res.data.results]
      this.loading = false
      if (res.data.results.length === 0 || res.data.pre_timestamp === null) {
        this.finished = true
      }
    },
    async onRefresh() {
      const res = await reqGetAriticles(this.item.id, this.timestamp)
      this.timestamp = res.data.pre_timestamp
      this.articleList = res.data.results
      this.isRefresh = false
    },
    close(articleId) {
      // 需求：关闭按钮控制显示隐藏举报弹窗
      // 子组件给父组件触发emit，让父组件控制弹窗的显示隐藏
      this.$emit('show-more', articleId)
      eventBus.$on('delDislikeArticle', (delArticleObj) => {
      // 进行删除操作

        // 这个Ariticleid是唯一，因为后台让传不感兴趣的时候就是传的文章的id
        this.articleList = this.articleList.filter(item => item.art_id !== delArticleObj.articleId)
      })
    },
    scollTop(e) {
      this.scrollTop = e.target.scrollTop
    }
  }
}
</script>

<style lang="scss" scoped>
.articleList {
  height: 100%;
  overflow: auto;
   .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
  .meta {
    span{
      margin-right: 10px;
    }
      .close{
      float: right;
      margin-top: 4px;
    }
  }
}
</style>
